<template>
  <div class="async-box">
    <BetweenLayout>
      <template #left>
        <n-card title="store 声明">
          <n-code :code="storeCode" language="javascript" />
        </n-card>
        <Tip type="code" :text="codeNow" />
      </template>
      <template #right>
        <n-button-group>
          <n-button round ghost type="info" size="large" @click="html">
            引入
          </n-button>
          <n-button
            ghost
            type="info"
            size="large"
            :loading="fetchLoading"
            @click="fetch"
          >
            获取数据
          </n-button>
          <n-button round ghost type="info" size="large" @click="reset">
            重置
            <n-icon>
              <ReloadOutline />
            </n-icon>
          </n-button>
        </n-button-group>
        <n-card class="mt-20" v-if="!imgSrc.length && !fetchLoading">
          <n-result
            status="418"
            title="我是个杯具"
            description="什么都没有呢！"
          >
          </n-result>
        </n-card>
        <n-card v-else class="mt-20" :class="{ 'ri-card': imgSrc.length }">
          <Skeleton :load="fetchLoading" :repeat="20" />
          <n-collapse-transition :show="!fetchLoading">
            <n-image-group>
              <n-grid :x-gap="12" :y-gap="8" :cols="6">
                <n-grid-item v-for="item in imgSrc" :key="item">
                  <n-image class="img-list" :src="item" />
                </n-grid-item>
              </n-grid>
            </n-image-group>
          </n-collapse-transition>
        </n-card>
      </template>
    </BetweenLayout>
  </div>
</template>

<script>
import { defineComponent, computed, ref } from 'vue'
import { asyncStore } from '@/store/async.store'
import { loading } from '@/utils/loading'
import Skeleton from '@/components/Skeleton/index.vue'
import BetweenLayout from '@/components/BetweenLayout/index.vue'
import Tip from '@/components/Tip/index.vue'
import { ReloadOutline, CodeSlashSharp } from '@vicons/ionicons5'
import { storeCode, fetchCode, defaultCode, resetCode } from './code'
import { runCode } from '@/utils/runCode'

export default defineComponent({
  components: {
    BetweenLayout,
    CodeSlashSharp,
    Skeleton,
    ReloadOutline,
    Tip
  },
  setup() {
    loading()
    // *加载时的loading
    const fetchLoading = ref(false)

    // * store
    const store = asyncStore()

    // * 当前监听状态
    const status = ref(1)

    // * 当前使用的code
    const { codeNow, setCode } = runCode(defaultCode)

    // * 获取的 loading
    const imgSrc = computed(() => store.imgSrc)

    // * 重置
    const reset = () => {
      setCode(resetCode)
      store.$reset()
    }
    
    // * 界面
    const html = () => {
      setCode(defaultCode)
    }

    // * 获取
    const fetch = async () => {
      reset()
      setCode(fetchCode)
      fetchLoading.value = true
      await store.fetchImgSrc()
      window['$message'].success('请求成功')
      fetchLoading.value = false
      console.log(store)
    }

    return {
      codeNow,
      fetch,
      status,
      imgSrc,
      reset,
      html,
      fetchLoading,
      storeCode,
      fetchCode
    }
  }
})
</script>

<style lang="scss" scoped>
.async-box {
  ::v-deep(*) {
    .ri-card {
      .n-card__content {
        padding: 0;
      }
    }
    .img-list {
      img {
        width: 100%;
        opacity: 0;
        border-radius: 30%;
        overflow: hidden;
        transform: scale(0.8, 0.8);
        animation: show 0.5s ease-in;
        animation-fill-mode: forwards;
      }
      @keyframes show {
        from {
          opacity: 0;
          border-radius: 30%;
          transform: scale(0.8, 0.8);
        }
        to {
          opacity: 1;
          border-radius: 3%;
          transform: scale(1, 1);
        }
      }
    }
  }
}
</style>
